import React, { Component } from 'react'
import {NavLink,withRouter} from 'react-router-dom'
import './index.scss'

export class AppNav extends Component {
    get showNav(){
        const pathname = this.props.location.pathname

        return /home|aboutme|videoChannel|news/.test(pathname)
    }
    render() {
        const {showNav} = this

        return (
            <>
                {
                    showNav &&
                    <div className="nav">
                        <NavLink className="item" to="/home">
                            <i className="iconfont icon-shouyeweixuanzhong icon"></i>
                            <p className="title">首页</p>
                        </NavLink>
                        <NavLink className="item" to="/videoChannel">
                            <i className="iconfont icon-fenquweixuanzhong icon"></i>
                            <p className="title">频道</p>
                        </NavLink>
                        <NavLink className="item" to="/news">
                            <i className="iconfont icon-dongtaiweixuanzhong icon"></i>
                            <p className="title">动态</p>
                        </NavLink>
                        <NavLink className="item" to="/aboutme">
                            <i className="iconfont icon-wodeweixuanzhong icon"></i>
                            <p className="title">我的</p>
                        </NavLink>
                    </div>
                }
            </>
            
        )
    }
}

export default withRouter(AppNav)
